{template 'header'}
<style>
    #tab-content .timee{
        text-align: right;
    }
    #tab-content .mui-collapse-content h5{
        font-size: 1.1rem;
        color: #333;
    }
</style>
</head>
<body>
    <!-- 头部 结束 -->
    <div class="mui-content" id="main">
        <ul class="mui-table-view" id="tab-content">

        </ul>
    </div>
    <script id="tab-template" type="text/html">
        {{each list}}
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right">
                {{$value.title}}
            </a>
            <div class="mui-collapse-content">
                <p>{{$value.content}}</p>
                <p class="timee">{{$value.create_time}}</p>
            </div>
        </li>
        {{/each}}
    </script>
    {template 'nav'}
    <script src="{MODULE_URL}assets/js/jquery.min.js"></script>
    <script src="{MODULE_URL}assets/js/mui.min.js"></script>
    <script src="{MODULE_URL}assets/js/public.js"></script>
    <script src="{MODULE_URL}assets/js/template-web.js"></script>
    <script>
        var page = 1;
        var list_url = '{php echo $this->createMobileUrl("notice",array("op"=>"index"))}    ';
        mui.ajax(list_url,{
            data:{page:1},
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            async: false,
            timeout:10000,//超时时间设置为10秒；
            success:function(ret){
                var data = {
                    list: ret.data
                };
                var html = template('tab-template', data);
                console.log(html)
                $('#tab-content').html(html);
                console.log($('#tab-content').html());
                page = 2;
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                mui.alert(errorThrown);
            }
        });
        mui.init({
            pullRefresh: {
                container: "#main",
                // 下拉刷新
                down: {
                    style: 'circle',
                    callback: function () {
                        setTimeout(function () {
                            mui('#main').pullRefresh().endPulldownToRefresh();
                            mui.ajax(list_url,{
                                data:{page:1},
                                dataType:'json',//服务器返回json格式数据
                                type:'post',//HTTP请求类型
                                async: false,
                                timeout:10000,//超时时间设置为10秒；
                                success:function(ret){
                                    var data = {
                                        list: ret.data
                                    };
                                    var html = template('tab-template', data);
                                    $('#tab-content').html(html);
                                    page = 2;
                                },
                                error:function(xhr,type,errorThrown){
                                    //异常处理；
                                    mui.alert(errorThrown);
                                }
                            });
                        }, 1500);
                    }
                },
                // 上拉加载
                up: {
                    contentrefresh: "正在加载...",
                    contentnomore: "没有更多数据了",
                    callback: function (e) {
                        setTimeout(function () {
                            mui.ajax(list_url,{
                                data:{page:page},
                                dataType:'json',//服务器返回json格式数据
                                type:'post',//HTTP请求类型
                                async: false,
                                timeout:10000,//超时时间设置为10秒；
                                success:function(ret){
                                    if(ret.data.length>0){
                                        var data = {
                                            list: ret.data
                                        };
                                        mui('#main').pullRefresh().endPullupToRefresh(false); //有数据穿 false 反之 true
                                        var html = template('tab-template', data);
                                        $('#tab-content').append(html);
                                        page ++ ;
                                    }else{
                                        mui('#main').pullRefresh().endPullupToRefresh(true); //有数据穿 false 反之 true
                                    }
                                },
                                error:function(xhr,type,errorThrown){
                                    //异常处理；
                                    mui.alert(errorThrown);
                                }
                            });
                        }, 1500)
                    }
                }
            }
        });
    </script>
</body>
</html>